<template>
    <div style="min-width: 1200px;">
        <PageHeader></PageHeader>
        <div>
            <Menu></Menu>
            <el-main class="inline_block main">
                <el-container>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item><i class="el-icon-menu"></i></el-breadcrumb-item>
                        <el-breadcrumb-item v-for="(item, index) in breadCrumb" :key="index">
                            {{item}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-container>
                <router-view></router-view>
            </el-main>
        </div>
    </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import Menu from "@/component/Menu.vue";
  import PageHeader from "@/component/PageHeader.vue";
  import { State } from 'vuex-class';

  @Component({
    components: {
        Menu,
        PageHeader
    }
  })
    export default class Main extends Vue {
        @State breadCrumb!:Array<string>;
    }
</script>

<style lang="scss">
    .main {
        width: calc(100% - 206px);
        vertical-align: top;
    }
</style>